import React, { useEffect } from 'react';
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import HeaderItem from './configure/HeaderItem';
import {useNavigate,Outlet}from 'react-router-dom'



const { Header, Content, Footer, Sider } = Layout;





const App: React.FC = () => {
  const navigation = useNavigate()
//   const HeaderItem =[

//   {
//     key:"login",
//     label:"第五城节点"
//   },
//   {
//     key:"pihome",
//     label:"pi节点"
//   },

// ]
useEffect(()=>{
navigation('/login')

},[])
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();


  return (
    <Layout>
      <Header style={{ display: 'flex', alignItems: 'center' }}>
        <div className="demo-logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['login']}
          items={HeaderItem}
          style={{ flex: 1, minWidth: 0 }}
          onClick={(e)=>{
            console.log(e)
            // navigation(e)
            navigation(e.key)
          }}
        />
      </Header>
      {/* //占位符 */}
      <Outlet></Outlet>
      <Footer style={{ textAlign: 'center' }}>
      作者:刘晓陆
      </Footer>
    </Layout>
  );
};

export default App;
